
import React, { useState } from 'react';
import { FormItem, File, Input, Textarea, Image, FormLayoutGroup, Group,Button, Separator, Slider, Spacing} from '@vkontakte/vkui';
import { Icon24Camera} from '@vkontakte/icons';
import './AddMed.css';

const AddMed = () => {
  const [image, setImage] = React.useState(null);
  // const [text, setText] = React.useState('');
  // const [snackbar, setSnackbar] = React.useState(null);
  const [valueBasic, setValueBasic] = useState(50);
  
  const handleFileChange = (event) => {
    if (event.target.files && event.target.files.length > 0) {
      const file = event.target.files[0];
      const reader = new FileReader(); // Используем класс FileReader
  
      reader.onload = (e) => {
        setImage(e.target.result); // Устанавливаем URL изображения в state
   };
  
      reader.readAsDataURL(file); // Преобразуем Blob в base64 и передаем в Image
    }
};
    
  return (
    <>

          <Group id='AddMed'>
            <FormLayoutGroup 
              style={{
                justifyContent:'space-between',
                flexWrap: 'none',
              }}
              mode='horizontal'
              top="Загрузите Картинку">
                  <File before={<Icon24Camera role="presentation" />} size="m" onChange={handleFileChange}>
                    Загрузить картинку
                  </File>
                  <Image style={{marginLeft:'12px'}} size={96} src={image}></Image>
              </FormLayoutGroup>

              <Separator />

              <FormItem htmlFor="Name" top="Название">
                  <Input 
                  placeholder='Название'
                  id="name" />
              </FormItem>

              <FormItem top="Описание">
                  <Textarea
                  placeholder="Описание"
                  />
              </FormItem>

              <FormItem top={<span id="basic">Дозировка в мг</span>}>
                <Spacing/>
                <Slider min={10} max={500} value={Number(valueBasic)} aria-labelledby="basic" onChange={setValueBasic} />
              </FormItem>
              <FormItem top={<span style={{textWrap:"balance"}} id="basic">Если дозировка больше 500 мг,
               то введите значение вручную</span>}>
                <Input
                  type="number"
                  value={String(valueBasic)}
                  onChange={(e) => setValueBasic(e.target.value)}
                />
              </FormItem>
          </Group>
          <Button size='m'>Отправить</Button>
          <div style={{width:'100%', height:'45px'}} />
    </>
  );
};

export default AddMed;